<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><{:C('site_name')}></title>
<meta name="keywords" content="<{:C('keyword')}>" />
<meta name="description" content="<{:C('content')}>" />
<link rel="stylesheet" href="<{:STATICS}>/css/bootstrap.min.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/libs/font-awesome.css"/>
<link rel="stylesheet" href="<{:STATICS}>/css/jquery-ui.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/daterangepicker.css" type="text/css"/>
<link rel="stylesheet" href="<{:RES}>/css/style.css" type="text/css" media="all" />
</head>
<script type="text/javascript" src="<{:STATICS}>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/bootstrap.min.js"></script>
<script src="<{:STATICS}>/centaurus/js/daterangepicker.js"></script> 
<script type="text/javascript" src="<{:STATICS}>/js/jquery.artDialog.js?skin=aero"></script>
<script type="text/javascript" src="<{:STATICS}>/js/iframeTools.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
	//ajaxform
	var options = { 
		beforeSubmit:showRequest,//表单验证方式
        success:showResponse  // post-submit callback 
    }; 

    $('#ajaxForm').ajaxForm(options); 
    var btnStr = $("#myBtn").html();
    function showResponse(responseText, statusText)  {
		if (statusText == 'success') {
			var responseText=eval('('+responseText+')');
			if(responseText.state == 'SUCCESS'){
				alert(responseText.message);
				closeIframe();
			}else{
				alert(responseText.state);
				$("#myBtn").removeAttr('disabled').html(btnStr);
			}			
		}else{
			$("#myBtn").removeAttr('disabled').html(btnStr);
		 	alert('Lost Service');	
		}
	} 

	function showRequest(){
		 validata = $("form.form-validata").valid();
		 if (validata){
		 	$("#myBtn").attr('disabled','disabled').html('<i class="fa fa-spinner fa-spin"></i> waiting...');
		 }
		 return validata;
	}

	//validation验证
	$("form.form-validata").validate({
		errorElement: "span",
        errorClass: "error",

	})

	$.validator.addMethod("zip",function(value,element){
        return this.optional(element) || testZip(value);
    },"Invalid zip code");

});

//验证电话
function testZip(v){
    if(v==""){
        return false;
    }else{
        var pattern = /^([0-9]{5})$/;
        flag = pattern.test(v);
        if(!flag){
            return false;
        }else{
            return true;
        }
    }
}
</script> 

<script type="text/javascript">
var domid=art.dialog.data('domid');
// 返回数据到主页面
function closeIframe(url){
	var origin = artDialog.open.origin;
	origin.location.reload() ;
	setTimeout("art.dialog.close()", 100 )
}
</script>
<body>
<div class="container iframe">
	<div class="row">
		<div class="col-md-12">
			<form id="ajaxForm" action="<{:U('Appointment/save')}>" method="post" class="form-horizontal form-validata">
				<div class="form-group menteesBase">
					<img src="<{$toUser['face']|getFace=###}>">
					<p style="line-height:60px">To:<{$toUser['nickname']}></p>
				</div>	

				<div class="form-group">
					<label>Date</label>								
					<div class="input-group">
						<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
						<input type="text" class="form-control" id="date" name="date" value="" placeholder="Enter date" data-rule-required="true">
					</div>
				</div>

				<script> 
				$(function(){
					$("#date" ).datepicker({
						minDate: new Date()
					});
				});
				</script>

				<div class="form-group">
					<label>Time</label>								
					<select name="time" id="time" class="form-control" data-rule-required="true">
						<option value="">Select</option>
						<option value="8:00 AM">8:00 AM</option>
						<option value="9:00 AM">9:00 AM</option>
						<option value="10:00 AM">10:00 AM</option>
						<option value="11:00 AM">11:00 AM</option>
						<option value="12:00 AM">12:00 AM</option>
						<option value="1:00 PM">1:00 PM</option>
						<option value="2:00 PM">2:00 PM</option>
						<option value="3:00 PM">3:00 PM</option>
						<option value="4:00 PM">4:00 PM</option>
						<option value="5:00 PM">5:00 PM</option>
						<option value="6:00 PM">6:00 PM</option>
						<option value="7:00 PM">7:00 PM</option>
						<option value="8:00 PM">8:00 PM</option>
						<option value="9:00 PM">9:00 PM</option>
						<option value="10:00 PM">10:00 PM</option>
					</select>
				</div>

				<div class="form-group">
					<label>Address</label>								
					<input type="text" class="form-control" id="address" name="address" placeholder="Street Address" data-rule-required="true">
					<br/>
					<input type="text" class="form-control" id="address1" name="address1" placeholder="Apartment,State,Unit etc.(Optional)"/>
				</div>

				<div class="form-group">
					<div class="row">
						<div class="col-xs-4">
							<label>City</label>
							<input type="text" class="form-control" id="city" name="city" data-rule-required="true">
						</div>

						<div class="col-xs-4">
							<label>State</label>
							<select name="state" id="state" class="form-control" data-rule-required="true">
								<option value="">--select--</option>
								<volist name="state" id="vo">
								<option value="<{$vo.name}>"><{$vo.name}></option>
								</volist>
							</select>
						</div>

						<div class="col-xs-4">
							<label>Zip code</label>
							<input type="text" class="form-control" name="zip" id="zip" data-rule-required="true" data-rule-number="true" data-rule-zip="true">
						</div>
					</div>					
				</div>	

				<div class="form-group">
					<label for="exampleTextarea">Message</label>
					<textarea class="form-control" name="content" id="content" rows="5" data-rule-required="true"></textarea>
				</div>	

				<div class="form-group">				
					<button type="submit" id="myBtn" class="btn btn-success">Send</button>	
				</div>
				<input type="hidden" name="toID" value="<{$toUser['userid']}>">
				<input type="hidden" name="toName" value="<{$toUser['nickname']}>">
				<input type="hidden" name="toFace" value="<{$toUser['face']}>">
				<input type="hidden" name="fromID" value="<{$fromUser['userid']}>">
				<input type="hidden" name="fromName" value="<{$fromUser['nickname']}>">
				<input type="hidden" name="fromFace" value="<{$fromUser['face']}>">
			</form>
		</div>
	</div>
</div>
</body>
</html>